<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../css/pages/discover-search.css" />
</head>

<body>
	<div id="app">
		<div style="background-color: #fff;" id="height"></div>
		<div class="header-search">
			<div class="mui-input-row mui-search">
				<input id="search"  type="search" class="mui-input-clear" placeholder="美食/娱乐/健身" />
			</div>
			<span @click="cancelTap" class="cancel">取消</span>
		</div>



		<div class="search-history">
			<span class="title">搜索记录</span>
			<span class="clear" @click="clearTap">清除</span>
		</div>
		
		<div class="search-list">
			<div 
			  class="item" 
			  v-for="item in records"
			  @click="open_result(item)"
			  v-text="item"
			></div>	
		</div>
	</div>
	<script src="../../js/Width.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/vue.js"></script>
	<script src="../../js/Util.js"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init();
 
		mui.plusReady(function () {
			if(!mui.os.android){
				FastClick.attach(document.body);
			}
			Util.StatusbarHeight('height');
			if (plus.storage.getItem('history')) {
				searchhistory.records = plus.storage.getItem('history').split(',');
			}
			plus.webview.currentWebview().addEventListener("hide", function (e) {
				document.getElementById("search").value = "";
				document.getElementById("search").blur(); //取消焦点，关闭软键盘 
			});
			//页面显示事件 
			plus.webview.currentWebview().addEventListener("show", function (e) {
				setTimeout(function () { //自动打开软键盘，获取焦点 
					Util.openSoftKeyboard()
					document.getElementById("search").focus();
				}, 100);
				return false;
			});
		});

		var searchhistory = new Vue({
			el: '#app',
			data: {
				records: []
			},
			methods: {
				open_result: function (item) {
					mui.openWindow({
						id: 'search-result',
						url: './search-result.html',
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: "搜索结果", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true,
								splitLine: { // 标题栏控件的底部分割线，类似borderBottom
									color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
									height: "1px" // 分割线高度,默认值为"2px"
								}
							}
						},
						extras: {
							name: item
						}
					});
// 					searchhistory.records.remove(item);
// 					searchhistory.records.splice(0, 0, item);
				},
				//返回事件
				cancelTap: function() {
					mui.back();
				},
				//给清除添加事件
				clearTap: function() {
					plus.storage.setItem('history', '');
					this.records = [];
				}
			}
		});

		//新增属性
		Array.prototype.contains = function (obj) {
			var i = this.length;
			while (i--) {
				if (this[i] === obj) {
					return true;
				}
			}
			return false;
		}

		Array.prototype.indexOf = function (val) {
			for (var i = 0; i < this.length; i++) {
				if (this[i] == val) {
					return i;
				}
			}
			return -1;
		}

		Array.prototype.remove = function (val) {
			var index = this.indexOf(val);
			if (index > -1) {
				this.splice(index, 1);
			}
		}
		
		

		//键盘事件
		document.onkeydown = function (event) {
			var e = event || window.event || arguments.caller.arguments[0];
			if (e && e.keyCode == 13) {
				//回车事件
				if (searchhistory.records.contains(eval(document.getElementById('search')).value)) {
					searchhistory.records.remove(eval(document.getElementById('search')).value);
				}
				searchhistory.records.splice(0, 0, eval(document.getElementById('search')).value);
				plus.storage.setItem('history', searchhistory.records.toString());
				plus.key.hideSoftKeybord();
				//跳转到搜索结果页面
				mui.openWindow({
					id: 'search-result',
					url: './search-result.html',
					styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
						titleNView: { // 窗口的标题栏控件
							titleText: "搜索结果", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
							titleSize: "17px", // 字体大小,默认17px
							backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
							autoBackButton: true,
							splitLine: { // 标题栏控件的底部分割线，类似borderBottom
								color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
								height: "1px" // 分割线高度,默认值为"2px"
							}
						}
					},
					extras: {
						name: eval(document.getElementById('search')).value
					}
				});
			}
		}
	</script>
</body>

</html>
